<template>
  <div class="home">
    <div class="fanyaData">

      <div class="info">
        <!-- 面包屑 -->
        <div class="breadcrumb">
          <span v-for="(item, i) in breadcrumb" :key="item.key" @click="goBack(i)">{{ item.fileName }}</span>
        </div>
        <div>
          <!-- 已选个数 -->
          <span v-show="checkedList.length">
						已选&nbsp;<span style="color: #3A8BFF;">{{ this.checkedList.length }}</span>&nbsp;个，
					</span>
          <!-- 总数 -->
          <span>共&nbsp;{{ count }}&nbsp;个</span>
        </div>
      </div>
      <!-- 表格区 -->
      <div class="tableData">
        <!-- 表头 -->
        <div class="table_header table_row">
          <div :style="{flex: 1}">
            <input type="checkbox" :checked="allBoxValue" @click="checkAll"/>
          </div>
          <div :style="{flex: 11}">文件名</div>
          <div :style="{flex: 4}"></div>
          <div :style="{flex: 2}">大小</div>
          <div :style="{flex: 3}" @click="sortList">
            创建日期
            <span :class="formData.reverse ? 'sort_down' : 'sort_up'"></span>
          </div>
        </div>
        <!-- 列表 -->
        <div class="table_list">
          <!-- 文件夹 -->
          <div v-for="(item, i) in files.folder" :key="item.id" class="list_item table_row"
               :class="{active: checkedList.indexOf(item.id) !== -1}">
            <div :style="{flex: 1}">
              <input type="checkbox" disabled/>
            </div>
            <div :style="{flex: 11}" @click="clickFolder(i)">
              <img :src="item.icon" alt=""/>
              <a href="javascript:;">{{ item.fileName }}</a>
            </div>
            <div :style="{flex: 4}"></div>
            <div :style="{flex: 2}"></div>
            <div :style="{flex: 3}">{{ item.createTime }}</div>
          </div>
          <!-- 文件 -->
          <div v-for="(item, i) in files.file" :key="item.id" class="list_item table_row"
               :class="{active: checkedList.indexOf(item.id) !== -1}" @contextmenu.prevent="openRightMenu($event,item)">
            <div :style="{flex: 1}">
              <input type="checkbox" name="file" v-model="checkedList" :value="item.id"/>
            </div>
            <div :style="{flex: 11}">
              <img :src="item.icon" alt=""/>
              <a href="javascript:;">{{ item.fileName }}</a>
            </div>
            <div :style="{flex: 4}"></div>
            <div :style="{flex: 2}">{{ item.fileSize }}KB</div>
            <div :style="{flex: 3}">{{ item.createTime }}</div>
          </div>

        </div>
      </div>
    </div>

    <ul v-show="rightClickVisible" :style="{left:rightClick.left+'px',top:rightClick.top+'px'}" class="contextmenu">
      <!--<li v-if="rightClickItem.fileType==99" @click="handleClickFolder(rightClickItem)">打开</li>-->
      <!--<li @click="handleDelete(rightClickItem)">删除</li>-->
      <li @click="handleDownloadFile(rightClick.rightClickItem)">下载</li>
      <!--<li @click="handlePreviewFile(rightClickItem)" v-if="rightClickItem.fileType!=99">预览</li>
      <li @click="handleUpdate(rightClickItem)">编辑</li>-->
    </ul>
  </div>
</template>

<script>
    export default {
        name: 'Home1',
        data() {
            return {
                // 面包屑
                breadcrumb: [{
                    id: 0,
                    fileName: '全部文件'
                }],
                // 表单数据
                formData: {
                    // 上级文件夹id，默认全部文件最上层为0
                    id: 0,
                    // 搜索框内容
                    search: '',
                    // 是否逆序
                    reverse: false
                },
                // 文件列表
                files: {
                    folder: [],
                    file: []
                },
                // 被选中的文件id列表
                checkedList: [],

                //右键菜单
                rightClick: {
                    rightClickItem: null,
                    top: 0,
                    left: 0
                },
                rightClickVisible: false,
				courseStudentId:localStorage.getItem("ClassId"),
            }
        },
        computed: {
            // 文件总数
            count() {
                return this.files.folder.length + this.files.file.length
            },
            // 全选按钮状态
            allBoxValue() {
                return this.checkedList.length === this.files.file.length
            }
        },
        created() {
            // 清空被选中文件id列表
            this.checkedList = [];
            //获取课程文件夹
            this.getFiles()
        },
        methods: {
            // 获取课程文件列表
            getFiles() {
                // params参数：课程Id
                let courseId =this.courseStudentId;
                let token = window.localStorage.getItem("token");
                this.axios.get('/disk/search/findForCourse', {
                    headers: {
                        token: token
                    },
                    params: {
                        courseId
                    }
                }).then(response => {
                    let data = response.data.data;
                    this.files.folder = data.folder;
                    this.files.file = data.file;
                    this.breadcrumb = [
                        {
                            id: data.id,
                            fileName: "全部文件"
                        }
                    ];
                }).catch(error => {
                    console.log(error);
                });
            },

            //获取文件夹文件列表
            getFolderFiles(pid) {
                let token = window.localStorage.getItem("token");
                this.axios.get('/disk/search/findForFolder', {
                    headers: {
                        token: token
                    },
                    params: {
                        pid
                    }
                }).then(response => {
                    let data = response.data.data;
                    this.files.folder = data.folder;
                    this.files.file = data.file;
                }).catch(error => {
                    console.log(error);
                });
            },

            // 点击某文件夹
            clickFolder(index) {
                // 更新面包屑导航
                this.breadcrumb.push({
                    id: this.files.folder[index].id,
                    fileName: this.files.folder[index].fileName
                });
                let folderId = this.files.folder[index].id;
                // 更新文件列表
                this.getFolderFiles(folderId)
            },

            // 回到某文件夹下
            goBack(index) {
                if (index === this.breadcrumb.length - 1) return;
                let folderId = this.breadcrumb[index].id;
                //this.formData.id = folderId;
                this.breadcrumb = this.breadcrumb.slice(0, index + 1);
                this.getFolderFiles(folderId);
            },

            // 选中或取消全选
            checkAll(e) {
                this.checkedList = e.target.checked ?
                    this.files.file.map(item => item.id) : []
            },

            // 点击排序
            sortList() {
                this.files.folder.sort(this.compareCreateTime);
                this.files.file.sort(this.compareCreateTime);
                //排序方式取反
                this.formData.reverse = !this.formData.reverse;
            },
            //文件按照创建时间排序
            compareCreateTime(file1, file2) {
                if (this.formData.reverse) {
                    if (file1.createTime < file2.createTime) {
                        return 1;
                    }
                    return -1;
                } else {
                    if (file1.createTime < file2.createTime) {
                        return -1;
                    }
                    return 1;
                }
            },

            openRightMenu(e, item) {
                this.rightClick.rightClickItem = item;
                let x = e.clientX;
                let y = e.clientY;
                this.rightClick.top = y;
                this.rightClick.left = x;
                this.rightClickVisible = true;
            },
            closeMenu() {
                this.rightClickVisible = false;
            },
            handleDownloadFile(rightClickItem) {
                let file = rightClickItem;
                let fileId = file.id;
                let token = window.localStorage.getItem("token");
                this.axios.post("/disk/download/file", {
                    fileId: fileId
                }, {
                    headers: {
                        token: token
                    },
                    responseType: 'arraybuffer'
                }).then(res => {
                    console.log(res);
                    let content = res.data;
                    // 组装a标签
                    let elink = document.createElement("a");
                    // 设置下载文件名
                    elink.download = file.fileName;
                    elink.style.display = "none";
                    let blob = new Blob([content]);
                    elink.href = URL.createObjectURL(blob);
                    document.body.appendChild(elink);
                    elink.click();
                    document.body.removeChild(elink);
                    console.log("文件下载成功");
                }).catch(err => {
                    console.log(err);
                })
            }
        },
        watch: {
            rightClickVisible(value) {
                if (value) {
                    document.body.addEventListener('click', this.closeMenu)
                } else {
                    document.body.removeEventListener('click', this.closeMenu)
                }
            }
        }
    }
</script>

<style lang="scss" scoped="scoped">
  .home {
    height: 830px;


    .fanyaData {
      padding: 30px;
      min-height: 600px;
      background-color: #ffff;

      // 顶部按钮组
      .btn_group {
        display: flex;
        justify-content: space-between;

        // 上传
        .btn_update {
          padding: 0 22px;
          border: none;
          height: 36px;
          border-radius: 5px;
          background-color: #03d3bd;
          color: #fff;

          &:hover {
            cursor: pointer;
          }
        }

        // 搜索框
        .dataSearch {
          position: relative;
          width: 300px;
          height: 36px;

          // 输入框
          .ipt_val {
            position: absolute;
            left: 0;
            top: 0;
            padding: 0 14px 0 28px;
            outline: none;
            border-color: #d5d7d9;
            width: 170px;
            height: 34px;
            font-size: 14px;
            color: #181e33;
            border: 1px solid #e5e5e5;
            background: #f5f6f7;
            border-radius: 40px;

            &:hover {

              border: 1px solid #03d3bd;
            }

            &:focus {
              border: 1px solid #03d3bd;
            }
          }

          // 放大镜
          .ipt_fdj {
            position: absolute;
            // right: 14px;
            left: 8px;
            top: 8px;
            border: none;
            width: 18px;
            height: 18px;
            background-color: pink;
            background: url(/images/search_ico_new.png);
            background-size: 18px;

            &:hover {
              cursor: pointer;
              background-position: 0 -22px;
            }
          }

          // 搜索按钮
          .ipt_search {
            // width: 40px;
            position: absolute;
            right: 0;
            top: 0;
            padding: 0 22px;
            border: none;
            height: 36px;
            border-radius: 17px;
            background-color: #03d3bd;
            color: #fff;

            &:hover {
              cursor: pointer;
              color: #ffffff;
            }
          }
        }
      }

      .info {
        display: flex;
        justify-content: space-between;
        width: 100%;
        padding: 20px 0 10px 0;
        font-size: 12px;
        color: #8a8b99;

        // 面包屑
        .breadcrumb {
          span:not(:last-child) {
            &:hover {
              cursor: pointer;
              color: #3A8BFF;
            }

            &::after {
              content: '';
              display: inline-block;
              width: 6px;
              height: 10px;
              margin: 0 4px;
              background: url(/images/breadcrumb.png);
            }
          }
        }
      }

      // 表格区
      .tableData {

        // 表头
        .table_header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 40px;
          background-color: #f5f6f7;
          font-size: 14px;
          color: #8a8b99;

          .sort_up,
          .sort_down {
            width: 13px;
            height: 13px;
            margin: 3px 0 3px 6px;
            display: inline-block;
            overflow: hidden;
            vertical-align: middle;
            cursor: pointer;
            background: url(/images/sort_icon.png) no-repeat 0 0;
            background-size: 10px auto;
          }

          .sort_up:hover {
            background-position: 0 -15px;
          }

          .sort_down {
            background-position: 0 -30px;
          }

          .sort_down:hover {
            background-position: 0 -45px;
          }
        }

        // 行布局
        .table_row {
          padding-left: 15px;

          div {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            line-height: 40px;
            height: 100%;

            input {
              width: 18px;
              height: 18px;
              cursor: pointer;
            }
          }
        }

        // 列表
        .table_list {
          margin-top: 10px;

          // 列表项
          .list_item {
            display: flex;
            height: 66px;
            font-size: 14px;

            &.active {
              background-color: #f0f6ff;
            }

            &:hover {
              cursor: pointer;
              background-color: #f0f6ff;
            }

            div {
              line-height: 66px;

              img {
                margin-right: 20px;
                width: 28px;
                height: 28px;
                border-radius: 3px;
              }

              a {
                text-decoration: none;
                font-size: 15px;
                color: #131b26;

                &:hover {
                  color: #3A8BFF;
                }
              }
            }
          }
        }
      }
    }
  }

  .contextmenu {
    margin: 0;
    background: #fff;
    z-index: 3000;
    position: fixed;
    list-style-type: none;
    padding: 5px 0;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 400;
    color: #333;
    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
  }

  .contextmenu li {
    margin: 0;
    padding: 7px 16px;
    cursor: pointer;
  }

  .contextmenu li:hover {
    background-color: rgb(3, 125, 243);;
    color: white;
  }
</style>
